/**
* Created by tanyichao on 2017/5/17.
*/
<template>
    <div class="showAssess_container routerContent">
        <scroller :height="-40+'px'" lock-x ref="scroller">
            <div>
                <nav>评价详情</nav>

                <div class="header vux-1px-b">
                    <div class="header-img">
                        <img :src="orderInfoData.userImg | urlFilterAddServer" alt="">
                    </div>
                    <div class="header-info">
                        <div class="top">
                            <span>{{ orderInfoData.userName }}</span>
                            <span class="color999">{{ orderInfoData.evaluateCreateTime | longTimeStr }}</span>
                        </div>
                        <div class="star">
                            <span class="img" v-for="item in orderInfoData.evaluationScore"></span>
                            <span class="color999">{{ orderInfoData.orderLength }}分钟上菜</span>
                        </div>
                        <div class="text">{{ orderInfoData.content }}</div>
                    </div>
                </div>
                <div class="packages">
                    <div class="package" v-for="item in packages">
                        <div class="img">
                            <img :src="item.packageImg | urlFilterAddServer" alt="">
                        </div>
                        <div class="name">
                            <span>{{ item.packageName }}</span>
                            <span class="color999 taste">购买口味：{{ item.tasteName }}</span>
                        </div>
                        <div class="price">
                            <span class="priceNum">￥{{ item.price }}</span>
                            <span v-if="item.isActiveFollow" class="active assess"></span>
                            <span v-else  class="active noAssess"></span>
                        </div>
                    </div>
                </div>
                <div class="assess_content_infoItem vux-1px-b vux-1px-t" v-if="isAnonymous">
                    <span>您已经启用匿名评价</span>
                </div>
                <div v-if="msg!=1" class="btn" @click="doGoBackInfo">返回订单</div>
            </div>
        </scroller>
    </div>
</template>
<script>
    import {Scroller} from 'vux'

    import {showEvaluateService , getOrderInfoService} from '../services/index'
    export default {
        components: {
            Scroller
        },
        mounted(){
        },
        updated(){
            this.$nextTick(() => {
                this.$refs.scroller.reset()
            })
        },
        data(){
            return{
                orderInfoData:{},
                packages:[],
                orderId:'',
                assess:'assess',
                noAssess:'noAssess',
                isAnonymous:false,
                msg:"",
            }
        },
        activated(){
            if(this.orderId == '' || this.$route.query.orderId){
                this.orderId = this.$route.query.orderId;
                this.msg = this.$route.query.msg;
                this.getOrderInfo()
            }
        },
        deactivated(){

        },
        watch: {},
        created(){
        },
        computed: {},
        methods: {
            getOrderInfo(){
                getOrderInfoService().save({orderId: this.orderId}).then(res => {
                    const body = res.body;
                    if (body && body.code == 200) {
                        this.showEvaluate(body.data.packages);
                    }
                });
            },
            showEvaluate(packages){
                const packagesNew = this.filterPackages(packages,false);
                showEvaluateService().save({orderId: this.orderId, packages: JSON.stringify(packagesNew)}).then(res => {
                    const body = res.body;
                    if (body && body.code == 200) {
                        this.orderInfoData = body.data;
                        this.packages = this.filterPackagesFollow(body.data.packages);
                        this.isAnonymous = this.orderInfoData.isAnonymous == '1' ? true : false;
                        this.$refs.scroller.reset();
                    }
                });
            },
            doGoBackInfo(){
                this.$router.back();
            },
            //packages 数据用来展示
            filterPackagesFollow(packages){
                let newPackages = [];
                if (packages.length > 0) {
                    packages.forEach((x, i) => {
                        x.isActiveFollow = x.praise == '1' ? true : false;
                        newPackages.push(x);
                    });
                }
                return newPackages;
            },
            //packages数据用来提交表单
            filterPackages(packages, action){
                let newPackages = [];
                if (packages.length > 0) {
                    packages.forEach((x, i) => {
                        let obj = {
                            packageId: x.packageId,
                            packageName: x.packageName,
                            menuId: x.menuId,
                            praise: x.praise,
                            cdTasteId:x.cdTasteId
                        }
                        if (action && !obj.praise) {
                            obj.praise = '0';
                        }
                        newPackages.push(obj);
                    });
                }
                return newPackages;
            },
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    .showAssess_container {
        background-color: #fff !important;
        nav {
            font-size: .75rem;
            color: #fff;
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            background: #fc8672;
            text-align: center;
        }
        .header {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-content: center;
            font-size: 0.5rem;
            padding: 1rem 0.5rem;
            width: 100%;

            .header-img {
                height: 1.5rem;
                width: 1.5rem;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .header-info {
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                justify-content: center;
                width: 90%;
                margin-left: 0.3rem;

                .top {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                }
                .star .img {
                    margin-top: 0.25rem;
                    background: url(../assets/img/re_yellow_star.png) no-repeat center center;
                    background-size: 100% 100%;
                    width: 11px;
                    height: 11px;
                    display: inline-block;
                }
                .text {
                    padding: 0.5rem 0;
                }
            }

        }
        .packages {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-between;
            padding: 0 0.5rem .25rem 0.5rem;

            .package {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-around;
                align-items: center;
                font-size: 0.75rem;
                margin-top: .25rem;
                .img img {
                    width: 2rem;
                    height: 2rem;
                }
                .name{
                    display: flex;
                    flex-direction:column;
                    flex-wrap: nowrap;
                    justify-content: flex-end;
                    width: 50%;
                    margin-left: -0.8rem;
                }
                .taste{

                }
                .price{
                    position: relative;
                    height: 17px;
                    .priceNum{
                        float: left;
                        line-height: 20px;
                    }
                }
                .active{
                    width: 17px;
                    height: 17px;
                    display: inline-block;
                    margin-left: 1.5rem;
                }
                .assess{
                    background: url(../assets/img/icon-follow-up.png) no-repeat center center;
                    background-size: 100% 100%;
                }
                .noAssess{
                    background: url(../assets/img/icon-teasing-down.png) no-repeat center center;
                    background-size: 100% 100%;
                }
            }
        }
        .assess_content_infoItem {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            background-color: #fff;
            margin-top: 0.25rem;
            padding:15px  10px;
            font-size: 0.75rem;

            span:nth-child(2) {
                color: #999;
            }
        }
        .btn{
            width:5rem;
            height: 1.5rem;
            border: 1px solid #FC7837;
            border-radius: 0.25rem;
            color: #FC7837;
            font-size: 0.75rem;
            text-align: center;
            line-height: 1.5rem;
            margin: 1.3rem auto;

        }
        .color999{
            color: #999999;
            font-size: 0.5rem;
        }
    }
</style>
